<!--修改密码界面
作者：张家豪
时间：2020/6/22
-->
<template>
  <el-dialog :title="title" :visible="visible" :close-on-click-modal="false" :before-close="handleClose" width="500px">
    <el-form :model="formData" :rules="rules" ref="formData" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>

      <el-form-item label="手机号" prop="tel">
        <el-input v-model="formData.tel"></el-input>
      </el-form-item>
      <el-form-item style="width: 100%" label="身份">
        <el-select style="width: 100%" v-model="formData.role" clearable placeholder="请选择身份">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="新密码" prop="newpassword">
        <el-input v-model="formData.newpassword"></el-input>
      </el-form-item>
<<<<<<< HEAD
      <!-- 验证码 -->
      <el-form-item prop="verifycode" label="验证码">
        <!-- 注意：prop与input绑定的值一定要一致，否则验证规则中的value会报undefined，因为value即为绑定的input输入值 -->
        <el-input v-model="formData.verifycode" placeholder="请输入验证码" class="identifyinput"></el-input>
      </el-form-item>

      <el-form-item>
        <div class="identifybox">
          <div @click="refreshCode">
            <s-identify :identifyCode="identifyCode"></s-identify>
          </div>
          <el-button @click="refreshCode" type='text' class="textbtn">看不清，换一张</el-button>
        </div>
      </el-form-item>
    </el-form>
      
=======
 
    </el-form>

>>>>>>> c60d65668b201db932d59f811cfa2aba9f96464d
    <span slot="footer" class="dialog-footer">
      <el-button type="text" @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">{{loading?'提交中...':'确认提交'}}</el-button>
    </span>
<<<<<<< HEAD
    
=======

>>>>>>> c60d65668b201db932d59f811cfa2aba9f96464d
  </el-dialog>
</template>

<script>
<<<<<<< HEAD
    import {alter} from "@/api/modules/user"
    import SIdentify from '@/components/identify'
=======
  import {
    alter
  } from "@/api/modules/user"
>>>>>>> c60d65668b201db932d59f811cfa2aba9f96464d
  

  export default {
    name: "edit",
<<<<<<< HEAD
    components:{SIdentify},
=======
    
>>>>>>> c60d65668b201db932d59f811cfa2aba9f96464d
    props: {
      visible: {
        type: Boolean
      },
      title: {
        type: String,
        default: '新增'
      },

      defaultFormData: {
        type: Object
      },
    },
    data() {
<<<<<<< HEAD
      // 验证码自定义验证规则
      const validateVerifycode = (rule, value, callback) => {
      if (value === '') {
      callback(new Error('请输入验证码'))
      } else if (value !== this.identifyCode) {
      console.log('validateVerifycode:', value)
      callback(new Error('验证码不正确!'))
      } else {
      callback()
      }
      };
      return {
        identifyCodes: "1234567890",
        identifyCode: "",
        options:[{
            value:"老师",
            label:"老师"
            },
            {
            value:"学生",
            label:"学生"
            }],
 
=======
      
      return {
        
        options: [{
            value: "老师",
            label: "老师"
          },
          {
            value: "学生",
            label: "学生"
          }
        ],

>>>>>>> c60d65668b201db932d59f811cfa2aba9f96464d


        loading: false,

        formData: {
<<<<<<< HEAD
          newpassword:'',
          tel:'',
          role:'',
          username:'',
          verifycode:''
=======
          newpassword: '',
          tel: '',
          role: '',
          username: '',
          
>>>>>>> c60d65668b201db932d59f811cfa2aba9f96464d
        },
        address: [],
        rules: {
          username: [{
            required: true,
            message: "楼栋名不能为空",
            trigger: "blur"
          }],
          password: [{
            required: true,
            message: "管理员不能为空",
            trigger: "blur"
          }],
          tel: [{
              required: true,
              message: "电话号码不能为空",
              trigger: "blur"
            },
            {
              min: 11,
              max: 11,
              message: '电话号码格式不正确'
            },
            {
              validator: function (rule, value, callback) {
                if (/^1[34578]\d{9}$/.test(value) == false) {
                  callback(new Error("请输入正确的手机号"));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }

          ],
         

<<<<<<< HEAD
            ],
            verifycode: [
            { required: true, trigger: 'blur', validator: validateVerifycode }
            ]
            
=======
>>>>>>> c60d65668b201db932d59f811cfa2aba9f96464d
        },

        refresh: false
      }
    },
    mounted() {
<<<<<<< HEAD
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
=======
     
>>>>>>> c60d65668b201db932d59f811cfa2aba9f96464d

      if (JSON.stringify(this.defaultFormData) == "{}") {

      } else {
        let formData = this.clone(this.defaultFormData)
        this.formData = JSON.parse(JSON.stringify(formData))
      }
    },
    methods: {
<<<<<<< HEAD
      // 验证码
      randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
      },
      refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
      },
      makeCode(o, l) {
      for (let i = 0; i < l; i++) { this.identifyCode +=this.identifyCodes[ this.randomNum(0,
        this.identifyCodes.length)]; } console.log(this.identifyCode); } ,

        handleChange(value) {
          console.log(value);
        },
       handleClose() {
         this.$emit('close', this.refresh)
       },
       handleSubmit() {
         this.$refs.formData.validate(valid => {
           if (valid) {
             this.loading = true
             this.formData.adress = this.address.join('/');
             console.log(this.formData.adress)
               alter({
                 ...this.formData,
               }).then(res => {
                 this.loading = false
                 if (res.success) {
                   this.refresh = true
                   this.toast(res.message)
                   this.handleClose()
                 }
               }).catch(data =>{
                    this.toast(data,7)
                    this.refresh = true
                    this.handleClose()
                }) 
           
           }
         })
       }
=======
      

      handleChange(value) {
        console.log(value);
      },
      handleClose() {
        this.$emit('close', this.refresh)
      },
      handleSubmit() {
        this.$refs.formData.validate(valid => {
          if (valid) {
            this.loading = true
            this.formData.adress = this.address.join('/');
            console.log(this.formData.adress)
            alter({
              ...this.formData,
            }).then(res => {
              this.loading = false
              if (res.success) {
                this.refresh = true
                this.toast(res.message)
                this.handleClose()
              }
            }).catch(data => {
              this.toast(data, 7)
              this.refresh = true
              this.handleClose()
            })

          }
        })
      }
>>>>>>> c60d65668b201db932d59f811cfa2aba9f96464d
    }
  }
</script>

<style scoped>
  .identifybox{
  display: flex;
  justify-content: space-between;
  margin-top:7px;
  }
  .iconstyle{
  color:#409EFF;
  }
</style>
